<template>
  <div class="home col">
    <router-link to="/test">去测试</router-link>
    <div class="col">
      <span v-for="item in 100" :key="item" style="color: aqua">item:{{ item }}</span>
    </div>
    <clam-view v-slot="{ data, mask }" :res="response">
      <div>
        <p>
          <span>{{ data.name }}</span>
        </p>
        <span>Home</span>
        <p :class="mask">
          {{ data.name }}
        </p>
        <p>
          <span>{{ data.name }}</span>
        </p>
        <p>
          <span>{{ data.name }}</span>
        </p>
        <router-link to="/about">{{ data.route }}</router-link>
      </div>
    </clam-view>
    <button @click="showButton = !showButton">show</button>
    <button @click="show2">show2</button>

    <van-action-sheet v-model:show="show" title="标题">
      <div class="content col">
        内容
        <router-link to="/about">去about</router-link>
        <button @click="goAbout">去about</button>
      </div>
    </van-action-sheet>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue'
  import { createLoading } from '@/type'
  import { ActionSheet, Dialog } from 'vant'
  import ClamView from '@/components/clam_view/index.vue'
  import { backCloseDialog, onPageShown } from '@/hooks'
  import router from '@/router'

  export default defineComponent({
    name: 'Home',
    components: {
      'clam-view': ClamView,
      [ActionSheet.name]: ActionSheet
    },
    setup() {
      const [show, forwardInDialog] = backCloseDialog(false)

      const showButton = ref(false)

      const goAbout = () => {
        forwardInDialog(() => {
          router.push('/about')
        })
      }

      const response = reactive(
        createLoading({
          name: '站位文字',
          route: '站位文字'
        })
      )

      onPageShown(() => {
        console.log('--onPageShown1--')
        setTimeout(() => {
          /**
           * */
          // @ts-ignore
          response.update({
            code: 0,
            data: {
              name: '站位文字',
              route: '站位文字'
            }
          })
        }, 2500)
      })

      const show2 = () => {
        Dialog.confirm({
          title: '标题',
          message: '如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。'
        })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          })
      }

      return {
        show2,
        response,
        show,
        goAbout,
        showButton
      }
    }
  })
</script>

<style scoped></style>
